<template>
    <div>
        <div style="margin:10px auto; width:600px">
            <i-table :data="lines" :columns="columns" size="small" stripe border :disabled-hover="true"></i-table>
        </div>
    </div>
</template>
<style>
    .ivu-table-small td {height: 30px !important}
    .addTh .ivu-table-cell {width:100%;text-align: center}
    .ivu-btn-group-small>.ivu-btn>.ivu-icon {font-size: 15px}
    .icon .ivu-btn-ghost.ivu-btn-icon-only .ivu-icon {color: white}
</style>

<script>
    import MyInput from 'C/input.vue'

    let newLine = () => {
        return {i:'',m:null}
    }
    let figure = (ii)=>{
        let arr = ii.split("").map(v=>parseInt(v))
        return Math.max.apply(null, arr) - Math.min.apply(null, arr)
    }
    let COL_1 = [0,1,2,3,4,9]
    let COL_2 = [5,6,7,8]

    const MAX = 20

    export default {
        data () {
            return {
                lines:[],
                columns: [
                    { title: "", type: "index", width: 60 },
                    { 
                        title: "自变量",
                        render:(h,p)=>h(MyInput,{
                            style:{width:'100px'},
                            props: {value:p.row.i},
                            on:{
                                'change':(v)=>{
                                    this.onChange(p.index, v)
                                }
                            }
                        })
                    },
                    { 
                        title: "第二列",width:160,className:"icon",
                        render:(h,p)=> h('Button', {
                            style:{width:'120px'},
                            props:{type:COL_1.indexOf(p.row.m)>-1?"success":"ghost",icon:"android-star", size:"small"}
                        })
                    },
                    {
                        title:"第三列", width:140,className:"icon",
                        render:(h,p)=> {
                            return h('Button', {
                                style:{width:'100px'},
                                props:{type:COL_2.indexOf(p.row.m)>-1?"success":"ghost",icon:"android-star", size:"small"}
                            })
                        }
                    },
                    { 
                        width:90,className:'addTh',
                        renderHeader: (h, p) => {
                            return h('Button', {
                                props: { size: "small", type: "ghost", shape: "circle", icon: "ios-plus-empty" },
                                nativeOn: {
                                    click: () =>  this.add()
                                }
                            })
                        },
                        render:(h,p)=> h('ButtonGroup',{props:{size:"small"}},[
                            h('Button', {
                                attrs: { title: "还原"},
                                props: { type: "ghost", icon: "ios-reload"},
                                nativeOn: {
                                    click: () => this.$set(this.lines, p.index, newLine())
                                }
                            }),
                            h('Button', {
                                attrs: { title: "删除此行"},
                                props: { type: "ghost", icon: "ios-trash"},
                                nativeOn: {
                                    click: () => this.lines.splice(p.index, 1)
                                }
                            })
                        ])
                    }
                ]
            }
        },
        methods: {
            onChange (line, v){
                let l = this.lines[line]
                if(v.length>=4)
                    this.$set(this.lines, line, Object.assign(l, {i:v, m:v.length>=4? figure(v) : null} ))
            },
            add (){
                this.lines.push(newLine())
                if(this.lines.length>MAX){
                    this.lines.shift()
                    M.warn("当前数据超出"+MAX+"行，第一行被清除...")
                }
                    
            }
        },
        mounted () {
            this.lines.push(newLine())
        }
    }
</script>